<script setup>
import {ref, onMounted, onUnmounted, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {modelApi} from "@/api/modelApi";
import Cookies from 'js-cookie'
import {ElMessage, ElMessageBox} from "element-plus";

// 导入职业图片
import roleImg01 from '@/assets/role-img01.webp';
import roleImg02 from '@/assets/role-img02.webp';
import roleImg03 from '@/assets/role-img03.webp';
import roleImg04 from '@/assets/role-img04.webp';
import roleImg05 from '@/assets/role-img05.webp';
import roleImg06 from '@/assets/role-img06.webp';
import roleImg07 from '@/assets/role-img07.webp';
import roleImg08 from '@/assets/role-img08.webp';
import roleImg09 from '@/assets/role-img09.webp';

const route = useRoute();
const router = useRouter();
const run = ref(true);
const models = ref(null);

// 弹窗相关状态
const showUsageDialog = ref(false);
const currentModel = ref(null);

const getCategoryInfo = (path) => {
  const categoryMap = {
    // 角色阵营
    '/gunz2/characters/vampire': { title: '血族角色', icon: '🦇', description: '血族阵营角色模型资源集合' },
    '/gunz2/characters/judge': { title: '审判者角色', icon: '⚖️', description: '审判者阵营角色模型资源集合' },
    // 特工职业 - 使用职业头像图片
    '/gunz2/characters/agent/blade_point': { title: '刀锋特工', icon: roleImg01, description: '近战刺客，隐身突袭，飞檐走壁', isImage: true },
    '/gunz2/characters/agent/flame': { title: '烈焰特工', icon: roleImg04, description: '火焰法师，范围攻击，火元素掌控', isImage: true },
    '/gunz2/characters/agent/double_gun': { title: '双枪特工', icon: roleImg02, description: '双持枪手，高机动性，快速射击', isImage: true },
    '/gunz2/characters/agent/machine_gun': { title: '机枪特工', icon: roleImg05, description: '重火力压制，持续输出，火力覆盖', isImage: true },
    '/gunz2/characters/agent/guided_missile': { title: '导弹特工', icon: roleImg06, description: '远程轰炸，精确制导，范围伤害', isImage: true },
    '/gunz2/characters/agent/sniper': { title: '狙击特工', icon: roleImg03, description: '远程狙击，精准打击，一击必杀', isImage: true },
    '/gunz2/characters/agent/medic': { title: '医生特工', icon: roleImg07, description: '治疗支援，团队保障，生命守护', isImage: true },
    '/gunz2/characters/agent/grenade': { title: '榴弹特工', icon: roleImg08, description: '爆炸专家，范围控制，火力压制', isImage: true },
    '/gunz2/characters/agent/engineer': { title: '工程师特工', icon: roleImg09, description: '技术专家，装备支援，战术辅助', isImage: true },
    // 武器职业 - 使用职业头像图片
    '/gunz2/weapons/blade_point': { title: '刀锋武器', icon: roleImg01, description: '近战武器，隐身突袭装备', isImage: true },
    '/gunz2/weapons/flame': { title: '烈焰武器', icon: roleImg04, description: '火焰武器，范围攻击装备', isImage: true },
    '/gunz2/weapons/double_gun': { title: '双枪武器', icon: roleImg02, description: '双持武器，高机动性装备', isImage: true },
    '/gunz2/weapons/machine_gun': { title: '机枪武器', icon: roleImg05, description: '重火力武器，持续输出装备', isImage: true },
    '/gunz2/weapons/guided_missile': { title: '导弹武器', icon: roleImg06, description: '远程武器，精确制导装备', isImage: true },
    '/gunz2/weapons/sniper': { title: '狙击武器', icon: roleImg03, description: '狙击武器，精准打击装备', isImage: true },
    '/gunz2/weapons/medic': { title: '医生武器', icon: roleImg07, description: '治疗武器，团队支援装备', isImage: true },
    '/gunz2/weapons/grenade': { title: '榴弹武器', icon: roleImg08, description: '爆炸武器，范围控制装备', isImage: true },
    '/gunz2/weapons/engineer': { title: '工程师武器', icon: roleImg09, description: '技术武器，战术辅助装备', isImage: true }
  };
  return categoryMap[path] || { title: '资源列表', icon: '📦', description: '精选3D资源集合' };
};

const resetData = () => {
  const categoryInfo = getCategoryInfo(route.fullPath);
  document.title = `3D资源分享站 - ${categoryInfo.title}资源中心`;
  console.log('重置数据，当前分类:', categoryInfo);
  getData();
};

// 路由名称到职业参数的映射
const getOccupationFromRoute = (routeName) => {
  const occupationMap = {
    // 角色阵营
    'vampire': 'vampire',
    'judge': 'judge',
    // 武器职业
    'weaponBladePoint': 'blade_point',
    'weaponFlame': 'flame',
    'weaponDoubleGun': 'doubleGun',
    'weaponMachineGun': 'machineGun',
    'weaponGuidedMissile': 'guided_missile',
    'weaponSniper': 'sniper',
    'weaponMedic': 'medic',
    'weaponGrenade': 'grenade',
    'weaponEngineer': 'engineer',
    // 特工职业
    'agentBladePoint': 'bladePoint',
    'agentFlame': 'flame',
    'agentDoubleGun': 'doubleGun',
    'agentMachineGun': 'machineGun',
    'agentGuidedMissile': 'guidedMissile',
    'agentSniper': 'sniper',
    'agentMedic': 'medic',
    'agentGrenade': 'grenade',
    'agentEngineer': 'engineer'
  };
  
  return occupationMap[routeName] || routeName;
};

const getData = async () => {
  try {
    const occupation = getOccupationFromRoute(route.name);
    
    console.log('当前路由信息:', {
      name: route.name,
      path: route.path,
      fullPath: route.fullPath,
      occupation: occupation
    });
    
    // 使用新的API服务
    const res = await modelApi.getModelList({
      search: '', // 搜索关键字，暂时为空
      occ: occupation // 职业筛选
    });
    
    console.log('API响应:', res.data);
    
    if (res.data.code === 200){
      // 适配新的返回格式 - 检查数据结构
      const responseData = res.data.data;
      console.log('原始响应数据:', responseData);
      
      // 如果返回的是数组，直接使用
      if (Array.isArray(responseData)) {
        models.value = responseData;
      } 
      // 如果返回的是对象，检查是否有list字段
      else if (responseData && Array.isArray(responseData.list)) {
        models.value = responseData.list;
      }
      // 如果返回的是对象，检查是否有records字段（分页数据）
      else if (responseData && Array.isArray(responseData.records)) {
        models.value = responseData.records;
      }
      // 其他情况，尝试直接使用
      else {
        models.value = responseData || [];
      }
      
      console.log('处理后的模型数据:', models.value);
      
      // 如果没有数据，使用模拟数据
      if (!models.value || models.value.length === 0) {
        console.log('API返回空数据，使用模拟数据');
        models.value = getMockData();
      }
    } else {
      console.error('API返回错误:', res.data);
      ElMessage.error(res.data.msg || '获取数据失败');
      // 使用模拟数据作为备选
      models.value = getMockData();
    }
  } catch (e) {
    console.error('请求错误:', e);
    // 如果API不可用，使用模拟数据
    console.log('使用模拟数据进行测试');
    models.value = getMockData();
  }
}

// 职业图片映射
const getProfessionImages = () => {
  return {
    'bladePoint': roleImg01,    // 刀锋
    'doubleGun': roleImg02,     // 双枪
    'sniper': roleImg03,        // 狙击
    'flame': roleImg04,         // 烈焰
    'machineGun': roleImg05,    // 机枪
    'guidedMissile': roleImg06, // 导弹
    'medic': roleImg07,         // 医生
    'grenade': roleImg08,       // 榴弹
    'engineer': roleImg09       // 工程师
  };
};

// 模拟数据用于测试
const getMockData = () => {
  const categoryInfo = getCategoryInfo(route.fullPath);
  const occupation = getOccupationFromRoute(route.name);
  
  // 使用测试用的横向图片URL（252*104比例）
  const testImages = [
    'https://via.placeholder.com/252x104/4F46E5/FFFFFF?text=模型1',
    'https://via.placeholder.com/252x104/7C3AED/FFFFFF?text=模型2',
    'https://via.placeholder.com/252x104/EC4899/FFFFFF?text=模型3',
    'https://via.placeholder.com/252x104/F59E0B/FFFFFF?text=模型4',
    'https://via.placeholder.com/252x104/10B981/FFFFFF?text=模型5',
    'https://via.placeholder.com/252x104/EF4444/FFFFFF?text=模型6',
    'https://via.placeholder.com/252x104/8B5CF6/FFFFFF?text=模型7',
    'https://via.placeholder.com/252x104/06B6D4/FFFFFF?text=模型8',
    'https://via.placeholder.com/252x104/84CC16/FFFFFF?text=模型9'
  ];
  
  const mockModels = [
    {
      MId: 1,
      MName: `${categoryInfo.title}模型1`,
      MImg: testImages[0],
      MUrl: '#',
      MOccupation: occupation,
      MOccupationName: categoryInfo.title.replace('特工', '').replace('武器', ''),
      // 额外的模拟字段，用于弹窗显示
      MModelSource: '游戏内提取',
      MBoneBinding: '已绑定',
      MPhysicsBinding: '已绑定',
      MExpressionMaking: '已制作',
      modelSource: '游戏内提取',
      boneBinding: '已绑定',
      physicsBinding: '已绑定',
      expressionMaking: '已制作'
    },
    {
      MId: 2,
      MName: `${categoryInfo.title}模型2`,
      MImg: testImages[1],
      MUrl: '#',
      MOccupation: occupation,
      MOccupationName: categoryInfo.title.replace('特工', '').replace('武器', ''),
      MModelSource: '游戏内提取',
      MBoneBinding: '已绑定',
      MPhysicsBinding: '已绑定',
      MExpressionMaking: '已制作',
      modelSource: '游戏内提取',
      boneBinding: '已绑定',
      physicsBinding: '已绑定',
      expressionMaking: '已制作'
    },
    {
      MId: 3,
      MName: `${categoryInfo.title}模型3`,
      MImg: testImages[2],
      MUrl: '#',
      MOccupation: occupation,
      MOccupationName: categoryInfo.title.replace('特工', '').replace('武器', ''),
      MModelSource: '游戏内提取',
      MBoneBinding: '已绑定',
      MPhysicsBinding: '已绑定',
      MExpressionMaking: '已制作',
      modelSource: '游戏内提取',
      boneBinding: '已绑定',
      physicsBinding: '已绑定',
      expressionMaking: '已制作'
    },
    {
      MId: 4,
      MName: `${categoryInfo.title}模型4`,
      MImg: testImages[3],
      MUrl: '#',
      MOccupation: occupation,
      MOccupationName: categoryInfo.title.replace('特工', '').replace('武器', ''),
      MModelSource: '游戏内提取',
      MBoneBinding: '已绑定',
      MPhysicsBinding: '已绑定',
      MExpressionMaking: '已制作',
      modelSource: '游戏内提取',
      boneBinding: '已绑定',
      physicsBinding: '已绑定',
      expressionMaking: '已制作'
    },
    {
      MId: 5,
      MName: `${categoryInfo.title}模型5`,
      MImg: testImages[4],
      MUrl: '#',
      MOccupation: occupation,
      MOccupationName: categoryInfo.title.replace('特工', '').replace('武器', ''),
      MModelSource: '游戏内提取',
      MBoneBinding: '已绑定',
      MPhysicsBinding: '已绑定',
      MExpressionMaking: '已制作',
      modelSource: '游戏内提取',
      boneBinding: '已绑定',
      physicsBinding: '已绑定',
      expressionMaking: '已制作'
    }
  ];
  
  return mockModels;
}

// 处理图片加载错误
const handleImageError = (event) => {
  console.warn('图片加载失败:', event.target.style.backgroundImage);
  // 设置默认图片
  event.target.style.backgroundImage = `url(${roleImg01})`;
};

// 测试API连接
const testApiConnection = async () => {
  try {
    const occupation = getOccupationFromRoute(route.name);
    console.log('测试API连接，参数:', {
      occupation: occupation
    });
    
    const res = await modelApi.getModelList({
      search: '',
      occ: occupation
    });
    
    console.log('API测试响应:', res.data);
    
    // 显示详细的数据结构信息
    let message = `API连接成功！\n`;
    message += `状态码: ${res.data.code}\n`;
    message += `消息: ${res.data.msg || '无'}\n`;
    
    if (res.data.data) {
      if (Array.isArray(res.data.data)) {
        message += `数据类型: 数组\n`;
        message += `数组长度: ${res.data.data.length}\n`;
        if (res.data.data.length > 0) {
          message += `第一个元素字段: ${Object.keys(res.data.data[0]).join(', ')}\n`;
        }
      } else if (typeof res.data.data === 'object') {
        message += `数据类型: 对象\n`;
        message += `对象字段: ${Object.keys(res.data.data).join(', ')}\n`;
      } else {
        message += `数据类型: ${typeof res.data.data}\n`;
        message += `数据值: ${res.data.data}\n`;
      }
    } else {
      message += `数据: null或undefined\n`;
    }
    
    ElMessage.success(message);
  } catch (error) {
    console.error('API测试失败:', error);
    ElMessage.error(`API连接失败: ${error.message}`);
  }
};

// 返回上一级
const goBack = () => {
  if (route.path.includes('/characters/agent/')) {
    // 特工职业页面 -> 返回特工列表
    router.push('/gunz2/characters/agent');
  } else if (route.path.includes('/characters/')) {
    // 角色阵营页面 -> 返回角色列表
    router.push('/gunz2/characters');
  } else if (route.path.includes('/weapons/')) {
    // 武器职业页面 -> 返回武器列表
    router.push('/gunz2/weapons');
  } else {
    // 默认返回游戏主页
    router.push('/gunz2');
  }
};

// 获取返回按钮文本
const getBackButtonText = () => {
  if (route.path.includes('/characters/agent/')) {
    return '返回特工';
  } else if (route.path.includes('/characters/')) {
    return '返回角色';
  } else if (route.path.includes('/weapons/')) {
    return '返回武器';
  } else {
    return '返回游戏';
  }
};

// 显示使用说明弹窗
const showUsageInstructions = (model) => {
  currentModel.value = model;
  showUsageDialog.value = true;
  // 防止背景滚动
  document.body.style.overflow = 'hidden';
  
  // 添加滚动事件监听器，让外部滚动影响弹窗内容
  setTimeout(() => {
    const dialog = document.querySelector('.usage-dialog');
    if (dialog) {
      const handleWheel = (e) => {
        e.preventDefault();
        dialog.scrollTop += e.deltaY;
      };
      
      // 监听整个文档的滚轮事件
      document.addEventListener('wheel', handleWheel, { passive: false });
      
      // 保存事件监听器引用，以便后续移除
      dialog._wheelHandler = handleWheel;
    }
  }, 100);
}

// 确认下载
const confirmDownload = async () => {
  if (!currentModel.value) return;
  
  try {
    // 第一步：获取下载token
    const username = Cookies.get('username') || 'anonymous';
    const tokenRes = await modelApi.generateDownloadToken(currentModel.value.MId || currentModel.value.mId, username);
    
    console.log('获取下载token响应:', tokenRes.data);
    
    if (tokenRes.data.code === 200) {
      const downloadToken = tokenRes.data.data.token;
      
      // 第二步：使用token进行下载
      const downloadRes = await modelApi.downloadModel(currentModel.value.MId || currentModel.value.mId, downloadToken, username);
      
      console.log('下载API响应:', downloadRes.data);
      
      if (downloadRes.data.code === 200) {
        // 下载成功，跳转到实际下载链接
        if (currentModel.value.MUrl || currentModel.value.mUrl) {
          window.open(currentModel.value.MUrl || currentModel.value.mUrl, '_blank');
        }
        ElMessage.success('开始下载3D资源文件');
      } else {
        ElMessage.error(downloadRes.data.msg || '下载失败，请检查你的网络连接');
      }
    } else {
      ElMessage.error(tokenRes.data.msg || '获取下载权限失败');
    }
  } catch (error) {
    console.error('下载错误:', error);
    if (error.response && error.response.status === 429) {
      ElMessage.error('请求过于频繁，请稍后再试');
    } else {
      ElMessage.error('下载失败，请稍后重试');
    }
  }
  
  // 关闭弹窗并清理事件监听器
  closeDialog();
}

// 统一的关闭弹窗函数
const closeDialog = () => {
  showUsageDialog.value = false;
  currentModel.value = null;
  // 恢复背景滚动
  document.body.style.overflow = '';
  
  // 移除滚动事件监听器
  const dialog = document.querySelector('.usage-dialog');
  if (dialog && dialog._wheelHandler) {
    document.removeEventListener('wheel', dialog._wheelHandler);
    delete dialog._wheelHandler;
  }
}

// 取消下载
const cancelDownload = () => {
  // 关闭弹窗并清理事件监听器
  closeDialog();
}

// 复制模型信息
const copyModelInfo = () => {
  if (!currentModel.value) return;
  
  const modelInfo = `资源名称：${currentModel.value.MName || currentModel.value.mName}
资源来源：${currentModel.value.MModelSource || currentModel.value.modelSource || '未知'}
骨骼绑定：${currentModel.value.MBoneBinding || currentModel.value.boneBinding || '未知'}
物理绑定：${currentModel.value.MPhysicsBinding || currentModel.value.physicsBinding || '未知'}
表情制作：${currentModel.value.MExpressionMaking || currentModel.value.expressionMaking || '未知'}`;
  
     navigator.clipboard.writeText(modelInfo).then(() => {
     ElMessage.success('资源信息已复制到剪贴板');
   }).catch(() => {
     // 降级方案：使用传统方法复制
     const textArea = document.createElement('textarea');
     textArea.value = modelInfo;
     document.body.appendChild(textArea);
     textArea.select();
     document.execCommand('copy');
     document.body.removeChild(textArea);
     ElMessage.success('资源信息已复制到剪贴板');
   });
}

onMounted(() => {
  resetData();
});

onUnmounted(() => {
  // 确保组件卸载时恢复滚动和清理事件监听器
  document.body.style.overflow = '';
  
  // 移除可能存在的滚动事件监听器
  const dialog = document.querySelector('.usage-dialog');
  if (dialog && dialog._wheelHandler) {
    document.removeEventListener('wheel', dialog._wheelHandler);
    delete dialog._wheelHandler;
  }
});

watch(() => route.fullPath, resetData)
</script>

<template>
  <div class="model-list-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="$router.push('/index')">首页</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item" @click="$router.push('/gunz2')">枪神纪</span>
      <span class="breadcrumb-separator">/</span>
      <span v-if="route.path.includes('/characters')" class="breadcrumb-item" @click="$router.push('/gunz2/characters')">角色模型</span>
      <span v-if="route.path.includes('/weapons')" class="breadcrumb-item" @click="$router.push('/gunz2/weapons')">武器模型</span>
      <span v-if="route.path.includes('/characters/')" class="breadcrumb-separator">/</span>
      <span v-if="route.path.includes('/weapons/')" class="breadcrumb-separator">/</span>
      <span v-if="route.path.includes('/characters/vampire')" class="breadcrumb-item" @click="$router.push('/gunz2/characters/vampire')">血族</span>
      <span v-if="route.path.includes('/characters/judge')" class="breadcrumb-item" @click="$router.push('/gunz2/characters/judge')">审判者</span>
      <span v-if="route.path.includes('/characters/agent')" class="breadcrumb-item" @click="$router.push('/gunz2/characters/agent')">特工</span>
      <span v-if="route.path.includes('/characters/agent/')" class="breadcrumb-separator">/</span>
      <span v-if="route.path.includes('/characters/agent/')" class="breadcrumb-item active">{{ getCategoryInfo(route.fullPath).title.replace('特工', '') }}</span>
      <span v-if="!route.path.includes('/characters/agent/') && (route.path.includes('/characters/') || route.path.includes('/weapons/'))" class="breadcrumb-item active">{{ getCategoryInfo(route.fullPath).title }}</span>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <div class="category-info">
        <div 
          class="category-icon"
          :class="{ 'category-icon-image': getCategoryInfo(route.fullPath).isImage }"
          :style="getCategoryInfo(route.fullPath).isImage ? { backgroundImage: `url(${getCategoryInfo(route.fullPath).icon})` } : {}"
        >
          {{ getCategoryInfo(route.fullPath).isImage ? '' : getCategoryInfo(route.fullPath).icon }}
        </div>
        <div class="category-text">
          <h1 class="category-title">{{ getCategoryInfo(route.fullPath).title }}</h1>
          <p class="category-description">{{ getCategoryInfo(route.fullPath).description }}</p>
        </div>
      </div>
      <div class="category-stats">
        <div class="stats-row">
          <div class="stat-item">
            <span class="stat-number">{{ models ? models.length : 0 }}</span>
            <span class="stat-label">个资源</span>
          </div>
          <!-- 返回上一级按钮 -->
          <button class="back-button" @click="goBack">
            <span class="back-icon">⬅️</span>
            <span class="back-text">{{ getBackButtonText() }}</span>
          </button>
          <!-- 测试API按钮 -->
          <button class="test-button" @click="testApiConnection">
            <span class="test-icon">🔧</span>
            <span class="test-text">测试API</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 模型网格 -->
    <transition name="fade">
      <div class="models-grid" v-if="run && models">
                  <div 
            v-for="(model, index) in models" 
            :key="model.MId || model.mId" 
            class="model-card"
            :style="{ animationDelay: `${index * 0.1}s` }"
            @click="showUsageInstructions(model)"
          >
            <div class="card-content">
              <div class="model-image-container">
                <div 
                  class="model-image" 
                  :style="{
                    backgroundImage: 'url(' + (model.MImg || model.mImg) + ')'
                  }"
                  @error="handleImageError"
                ></div>
              </div>
              
              <div class="model-info">
                <h3 class="model-title">{{ model.MName || model.mName }}</h3>
              <div class="model-meta">
                <span class="meta-item">
                  <span class="meta-icon">📦</span>
                  <span class="meta-text">3D资源</span>
                </span>
                <span class="meta-item">
                  <span class="meta-icon">⭐</span>
                  <span class="meta-text">精选</span>
                </span>
              </div>
            </div>
            
            <div class="card-overlay">
              <div class="overlay-content">
                <span class="download-icon">⬇️</span>
                <span class="download-text">下载资源</span>
              </div>
            </div>
          </div>
          
          <!-- 卡片边框发光效果 -->
          <div class="card-glow"></div>
        </div>
      </div>
    </transition>

    <!-- 空状态 -->
    <div v-if="run && (!models || models.length === 0)" class="empty-state">
      <div class="empty-icon">📦</div>
      <h3 class="empty-title">暂无资源</h3>
      <p class="empty-description">该资源分类下暂无可用资源，请稍后再来查看</p>
    </div>

    <!-- 使用说明弹窗 -->
    <div v-if="showUsageDialog" class="usage-dialog-overlay" @click="cancelDownload">
      <div class="usage-dialog" @click.stop>
        <div class="dialog-header">
          <h2 class="dialog-title">📋 使用说明</h2>
          <button class="close-button" @click="cancelDownload">×</button>
        </div>
        
                 <div class="dialog-content">
           <div class="usage-section">
             <h3 class="section-title">📦 资源信息</h3>
             <div class="model-info-display">
               <div class="model-preview">
                 <div 
                   class="preview-image" 
                   :style="{
                     backgroundImage: 'url(' + (currentModel?.MImg || currentModel?.mImg) + ')'
                   }"
                 ></div>
                 <h4 class="preview-title">{{ currentModel?.MName || currentModel?.mName }}</h4>
               </div>
             </div>
           </div>
           
           <div class="usage-section">
             <h3 class="section-title">👨‍🎨 制作信息</h3>
             <div class="model-details">
               <div class="detail-item">
                 <span class="detail-label">模型来源：</span>
                 <span class="detail-value">{{ currentModel?.MModelSource || currentModel?.modelSource || '未知' }}</span>
               </div>
               <div class="detail-item">
                 <span class="detail-label">骨骼绑定：</span>
                 <span class="detail-value">{{ currentModel?.MBoneBinding || currentModel?.boneBinding || '未知' }}</span>
               </div>
               <div class="detail-item">
                 <span class="detail-label">物理绑定：</span>
                 <span class="detail-value">{{ currentModel?.MPhysicsBinding || currentModel?.physicsBinding || '未知' }}</span>
               </div>
               <div class="detail-item">
                 <span class="detail-label">表情制作：</span>
                 <span class="detail-value">{{ currentModel?.MExpressionMaking || currentModel?.expressionMaking || '未知' }}</span>
               </div>
               <div class="copy-button-container">
                 <button class="copy-button" @click="copyModelInfo">
                   <span class="copy-icon">📋</span>
                   <span class="copy-text">复制资源信息</span>
                 </button>
               </div>
             </div>
           </div>
          
                     <div class="usage-section">
             <h3 class="section-title">⚠️ 重要提醒</h3>
             <div class="warning-list">
               <div class="warning-item">
                 <span class="warning-icon">🔒</span>
                 <span class="warning-text">本资源仅供学习和研究使用，禁止用于商业用途</span>
               </div>
               <div class="warning-item">
                 <span class="warning-icon">🚫</span>
                 <span class="warning-text">禁止二次配布，不得重新上传到其他平台</span>
               </div>
               <div class="warning-item">
                 <span class="warning-icon">📝</span>
                 <span class="warning-text">使用时必须标注借物表，注明原作者信息</span>
               </div>
               <div class="warning-item">
                 <span class="warning-icon">🛡️</span>
                 <span class="warning-text">请遵守相关法律法规，不得用于违法活动</span>
               </div>
               <div class="warning-item">
                 <span class="warning-icon">💾</span>
                 <span class="warning-text">下载后请妥善保管，不得传播给未授权用户</span>
               </div>
             </div>
           </div>
          
                     <div class="usage-section">
             <h3 class="section-title">📋 使用条款</h3>
             <div class="terms-content">
               <p>1. 本3D资源仅供个人学习和研究使用，禁止用于商业用途。</p>
               <p>2. 禁止二次配布，不得将资源重新上传到其他平台或网站。</p>
               <p>3. 使用时必须标注借物表，注明原作者、模型来源等信息。</p>
               <p>4. 用户不得将资源用于任何违法、有害或侵犯他人权益的活动。</p>
               <p>5. 用户应遵守相关法律法规，尊重知识产权和原作者权益。</p>
               <p>6. 资源下载后，用户应妥善保管，不得传播给未授权用户。</p>
               <p>7. 如发现违规使用，平台有权终止用户的使用权限。</p>
               <p>8. 本平台遵循MMD社区规则，请用户自觉遵守。</p>
             </div>
           </div>
        </div>
        
                 <div class="dialog-footer">
           <button class="cancel-button" @click="cancelDownload">取消</button>
           <button class="confirm-button" @click="confirmDownload">同意并下载资源</button>
         </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.model-list-container {
  padding: 20px 0;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--accent-silver);
  flex-wrap: wrap;
}

.breadcrumb-item {
  cursor: pointer;
  transition: color 0.3s ease;
}

.breadcrumb-item:hover {
  color: var(--accent-gold);
}

.breadcrumb-item.active {
  color: var(--accent-gold);
  cursor: default;
}

.breadcrumb-separator {
  color: var(--accent-silver);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-icon {
  font-size: 48px;
  animation: pulse 2s ease-in-out infinite;
}

.category-icon-image {
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  font-size: 0 !important; /* 隐藏文字 */
}

.category-text {
  text-align: left;
}

.category-title {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-gold), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 10px 0;
}

.category-description {
  font-size: 18px;
  color: var(--accent-silver);
  margin: 0;
  font-weight: 300;
}

.category-stats {
  text-align: right;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 15px;
  color: var(--accent-gold);
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-gold);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-silver);
}

/* 返回按钮样式 */
.back-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.2), rgba(124, 58, 237, 0.2));
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 15px;
  color: var(--accent-blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  height: fit-content;
}

.back-button:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(124, 58, 237, 0.3));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.back-icon {
  font-size: 16px;
}

.back-text {
  font-size: 14px;
}

/* 测试按钮样式 */
.test-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 15px;
  color: var(--accent-green);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  height: fit-content;
}

.test-button:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.test-icon {
  font-size: 16px;
}

.test-text {
  font-size: 14px;
}



.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 20px 0;
  width: 100%;
}

/* 超小屏幕 - 1列 */
@media (max-width: 480px) {
  .models-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 15px 0;
  }
  
  .model-card {
    max-width: 100%;
  }
  
  .model-image-container {
    aspect-ratio: 252/104;
    /* 确保图片居中 */
    text-align: center;
    line-height: 0;
  }
}

/* 小屏幕 - 2列 */
@media (min-width: 481px) and (max-width: 768px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 15px 0;
  }
  
  .model-image-container {
    height: 110px;
    aspect-ratio: 252/110;
    /* 确保图片居中 */
    text-align: center;
    line-height: 0;
  }
}

/* 中等屏幕 - 3列 */
@media (min-width: 769px) and (max-width: 1024px) {
  .models-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 20px 0;
  }
  
  .model-image-container {
    height: 120px;
    aspect-ratio: 252/120;
    /* 确保图片居中 */
    text-align: center;
    line-height: 0;
  }
}

/* 大屏幕 - 4列 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .models-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 25px 0;
  }
  
  .model-image-container {
    height: 130px;
    aspect-ratio: 252/130;
    /* 确保图片居中 */
    text-align: center;
    line-height: 0;
  }
}

/* 超大屏幕 - 5列 */
@media (min-width: 1441px) and (max-width: 1920px) {
  .models-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 35px;
    padding: 30px 0;
  }
  
  .model-image-container {
    height: 150px;
    aspect-ratio: 252/150;
    /* 确保图片居中 */
    text-align: center;
  }
}

/* 超宽屏幕 - 6列 */
@media (min-width: 1921px) {
  .models-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;
    padding: 35px 0;
  }
  
  .model-image-container {
    height: 140px;
    aspect-ratio: 252/140;
    /* 确保图片居中 */
    text-align: center;
    line-height: 0;
  }
}

/* 通用大屏幕优化 */
@media (min-width: 1025px) {
  .model-list-container {
    padding: 20px 0;
    width: 100%;
  }
  
  .model-image-container {
    height: 140px;
    aspect-ratio: 252/140;
  }
  
  .model-info {
    padding: 25px;
  }
  
  .model-title {
    font-size: 20px;
  }
  
  .model-meta {
    gap: 20px;
  }
  
  .meta-item {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* 响应式卡片优化 */
@media (max-width: 480px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .category-info {
    gap: 15px;
  }
  
  .category-icon {
    font-size: 36px;
  }
  
  .category-icon-image {
    width: 50px;
    height: 50px;
  }
  
  .category-title {
    font-size: 28px;
  }
  
  .category-description {
    font-size: 16px;
  }
  
  .category-stats {
    text-align: left;
    width: 100%;
  }
  
  .model-image-container {
    height: 80px;
  }
  
  .model-info {
    padding: 20px;
  }
  
  .model-title {
    font-size: 16px;
  }
  
  .model-meta {
    gap: 10px;
  }
  
  .meta-item {
    padding: 6px 10px;
    font-size: 10px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .category-info {
    gap: 18px;
  }
  
  .category-icon {
    font-size: 42px;
  }
  
  .category-icon-image {
    width: 55px;
    height: 55px;
  }
  
  .category-title {
    font-size: 32px;
  }
  
  .category-description {
    font-size: 17px;
  }
  
  .category-stats {
    text-align: left;
    width: 100%;
  }
  
  .model-image-container {
    height: 90px;
    display: block;
    /* 优化渲染性能 */
    will-change: transform;
    transform: translateZ(0);
  }
  
  .model-info {
    padding: 22px;
  }
  
  .model-title {
    font-size: 18px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  
  .category-info {
    gap: 20px;
  }
  
  .category-icon {
    font-size: 44px;
  }
  
  .category-icon-image {
    width: 58px;
    height: 58px;
  }
  
  .category-title {
    font-size: 34px;
  }
  
  .category-description {
    font-size: 18px;
  }
  
  .category-stats {
    text-align: right;
  }
  
  .model-image-container {
    height: 100px;
  }
  
  .model-info {
    padding: 24px;
  }
  
  .model-title {
    font-size: 19px;
  }
}

@media (min-width: 1025px) {
  .model-image-container {
    height: 104px;
    display: block;
    /* 优化渲染性能 */
    will-change: transform;
    transform: translateZ(0);
  }
  
  .model-info {
    padding: 25px;
  }
  
  .model-title {
    font-size: 20px;
  }
}

.model-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
  animation: fadeInUp 0.6s ease-out both;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.model-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--accent-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 175, 55, 0.3);
}

.card-content {
  position: relative;
  z-index: 2;
}

.model-image-container {
  position: relative;
  height: 104px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1));
  aspect-ratio: 252/104;
  display: block;
  /* 确保图片能够填充整个容器并居中 */
  /* 优化渲染性能 */
  will-change: transform;
  transform: translateZ(0);
  /* 确保容器内容居中 */
  text-align: center;
  line-height: 0;
  /* 额外的居中支持 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.4s ease;
  border-radius: 20px 20px 0 0;
  position: relative;
  /* 确保图片填充整个容器并居中 */
  margin: 0;
  display: block;
  /* 优化图片渲染质量 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* 确保图片完全居中 */
  background-attachment: scroll;
  background-origin: border-box;
  background-clip: border-box;
  /* 额外的居中保证 */
  background-position-x: center;
  background-position-y: center;
  /* 确保图片在容器中完全居中显示 */
  vertical-align: middle;
}

.model-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.model-card:hover .model-image::before {
  opacity: 1;
}

.model-card:hover .model-image {
  transform: scale(1.05) translateZ(0);
  background-position: center center;
  /* 确保悬停时仍然填充整个容器并居中 */
  margin: 0;
  display: block;
  /* 保持渲染质量 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* 确保悬停时图片仍然完全居中 */
  background-attachment: scroll;
  background-origin: border-box;
  background-clip: border-box;
}

.model-card:hover .image-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  border-radius: 20px;
  z-index: 10;
}

.model-card:hover .card-overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.overlay-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--white);
  text-align: center;
}

.download-icon {
  font-size: 20px;
  animation: pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.download-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  padding: 6px 12px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.model-info {
  padding: 20px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(124, 58, 237, 0.05));
  position: relative;
  z-index: 1;
}

.model-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 12px 0;
  text-align: center;
  line-height: 1.3;
}

.model-meta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 12px;
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.meta-item:hover {
  background: rgba(79, 70, 229, 0.2);
  transform: translateY(-1px);
}

.meta-icon {
  font-size: 14px;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.model-card:hover .card-glow {
  opacity: 1;
  animation: glow 2s ease-in-out infinite;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  animation: fadeInUp 0.8s ease-out;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
}

.empty-description {
  font-size: 16px;
  color: var(--accent-silver);
  margin: 0;
  line-height: 1.5;
}

/* 使用说明弹窗样式 */
.usage-dialog-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: grid !important;
  place-items: center !important;
  z-index: 9999 !important;
  animation: fadeIn 0.3s ease-out;
  /* 防止滚动穿透 */
  overflow: hidden !important;
  /* 确保在所有浏览器中都能正确居中 */
  box-sizing: border-box !important;
  /* 强制居中，防止任何偏移 */
  padding: 0 !important;
  margin: 0 !important;
  /* 重置所有可能的继承样式 */
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  /* 确保grid布局正确工作 */
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

.usage-dialog {
  background: var(--gradient-card) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 20px !important;
  width: 90% !important;
  max-width: 600px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  backdrop-filter: blur(20px) !important;
  animation: slideInUp 0.3s ease-out;
  /* 防止内容溢出 */
  box-sizing: border-box !important;
  /* 使用grid布局自动居中 */
  position: relative !important;
  /* 确保弹窗不会超出视口 */
  max-width: min(600px, 90vw) !important;
  max-height: min(80vh, calc(100vh - 40px)) !important;
  /* 确保弹窗在视口中心 */
  z-index: 10000 !important;
  /* 重置所有可能的继承样式 */
  margin: 0 !important;
  padding: 0 !important;
  /* 确保弹窗内容正确显示 */
  display: block !important;
  /* 防止任何外部样式影响 */
  float: none !important;
  clear: none !important;
  /* 隐藏滚动条但保持滚动功能 */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}

/* Webkit浏览器隐藏滚动条 */
.usage-dialog::-webkit-scrollbar {
  display: none !important;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.dialog-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  color: var(--accent-silver);
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
}

.dialog-content {
  padding: 30px;
}

.usage-section {
  margin-bottom: 30px;
}

.usage-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-gold);
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-info-display {
  display: flex;
  justify-content: center;
}

.model-preview {
  text-align: center;
}

.preview-image {
  width: 120px;
  height: 120px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 15px;
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.model-details {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 20px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-gold);
  min-width: 80px;
}

.detail-value {
  font-size: 14px;
  color: var(--white);
  text-align: right;
  flex: 1;
  margin-left: 15px;
}

.copy-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.copy-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  color: var(--accent-gold);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.copy-button:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.2));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.copy-icon {
  font-size: 16px;
}

.copy-text {
  font-size: 14px;
}

.warning-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 10px;
}

.warning-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.warning-text {
  font-size: 14px;
  color: var(--white);
  line-height: 1.5;
}

.terms-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 20px;
}

.terms-content p {
  font-size: 14px;
  color: var(--accent-silver);
  margin: 0 0 10px 0;
  line-height: 1.6;
}

.terms-content p:last-child {
  margin-bottom: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  padding: 25px 30px;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.cancel-button {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  color: var(--accent-silver);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.confirm-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--accent-gold), #b8941f);
  border: none;
  border-radius: 10px;
  color: var(--primary-black);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

/* 动画效果 */
.fade-enter-active {
  animation: fadeInUp 0.8s ease-out;
}

.fade-leave-active {
  animation: fadeOutDown 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .usage-dialog {
    width: 95% !important;
    max-height: 90vh !important;
    max-width: min(95vw, 600px) !important;
    /* 移动端也隐藏滚动条 */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* 移动端Webkit浏览器隐藏滚动条 */
  .usage-dialog::-webkit-scrollbar {
    display: none !important;
  }
  
  .usage-dialog-overlay {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .dialog-header {
    padding: 20px;
  }
  
  .dialog-content {
    padding: 20px;
  }
  
  .dialog-footer {
    padding: 20px;
    flex-direction: column;
  }
  
  .cancel-button,
  .confirm-button {
    width: 100%;
  }
  
  .warning-item {
    padding: 10px;
  }
  
  .terms-content {
    padding: 15px;
  }
  
  .model-details {
    padding: 15px;
  }
  

  
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .detail-label {
    min-width: auto;
  }
  
  .detail-value {
    text-align: left;
    margin-left: 0;
  }
  
  .copy-button {
    width: 100%;
    justify-content: center;
  }
  
  /* 移动端职业图片优化 */
  .model-image-container {
    height: 80px;
    display: block;
    /* 优化渲染性能 */
    will-change: transform;
    transform: translateZ(0);
    /* 确保移动端图片居中 */
    text-align: center;
    line-height: 0;
  }
  
  .model-info {
    padding: 20px;
  }
  
  .model-title {
    font-size: 16px;
  }
  
  .model-meta {
    gap: 10px;
  }
  
  .meta-item {
    padding: 5px 8px;
    font-size: 10px;
  }
  
  .download-text {
    font-size: 10px;
    padding: 4px 8px;
    background: transparent;
  }
  
  .download-icon {
    font-size: 16px;
  }
  
  /* 移动端职业头像优化 */
  .category-icon-image {
    width: 50px;
    height: 50px;
  }
  
  /* 移动端统计行优化 */
  .stats-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .stat-item {
    padding: 10px 14px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-label {
    font-size: 12px;
  }
  
  .back-button {
    padding: 10px 14px;
    font-size: 12px;
  }
}
</style>